import React, { useState } from 'react';
import styles from './Users.module.css';

const Users = () => {
  // 示例用户数据
  const [users] = useState([
    { id: 1, name: '张三', email: 'zhangsan@example.com', role: '管理员', status: '活跃' },
    { id: 2, name: '李四', email: 'lisi@example.com', role: '编辑', status: '活跃' },
    { id: 3, name: '王五', email: 'wangwu@example.com', role: '用户', status: '非活跃' },
    { id: 4, name: '赵六', email: 'zhaoliu@example.com', role: '用户', status: '活跃' },
    { id: 5, name: '钱七', email: 'qianqi@example.com', role: '编辑', status: '活跃' },
  ]);

  const [newUser, setNewUser] = useState({ 
    name: '', 
    email: '', 
    role: '用户',
    status: '活跃'
  });

  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setNewUser(prev => ({ ...prev, [name]: value }));
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    // 在实际应用中，这里会调用API添加用户
    alert(`添加用户: ${newUser.name} (${newUser.email})`);
    setNewUser({ name: '', email: '', role: '用户', status: '活跃' });
  };

  return (
    <div className={styles.container}>
      <h1 className={styles.title}>用户管理</h1>
      
      <div className={styles.card}>
        <h2>用户列表</h2>
        <div className={styles.tableContainer}>
          <table className={styles.table}>
            <thead>
              <tr>
                <th>ID</th>
                <th>姓名</th>
                <th>邮箱</th>
                <th>角色</th>
                <th>状态</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              {users.map(user => (
                <tr key={user.id}>
                  <td>{user.id}</td>
                  <td>{user.name}</td>
                  <td>{user.email}</td>
                  <td>{user.role}</td>
                  <td>
                    <span className={`${styles.status} ${user.status === '活跃' ? styles.active : styles.inactive}`}>
                      {user.status}
                    </span>
                  </td>
                  <td>
                    <button className={`${styles.button} ${styles.editButton}`}>编辑</button>
                    <button className={`${styles.button} ${styles.deleteButton}`}>删除</button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>

      <div className={styles.card}>
        <h2>添加新用户</h2>
        <form onSubmit={handleSubmit} className={styles.form}>
          <div className={styles.formGroup}>
            <label className={styles.formLabel}>姓名:</label>
            <input
              type="text"
              name="name"
              value={newUser.name}
              onChange={handleInputChange}
              className={styles.formInput}
              required
            />
          </div>
          <div className={styles.formGroup}>
            <label className={styles.formLabel}>邮箱:</label>
            <input
              type="email"
              name="email"
              value={newUser.email}
              onChange={handleInputChange}
              className={styles.formInput}
              required
            />
          </div>
          <div className={styles.formGroup}>
            <label className={styles.formLabel}>角色:</label>
            <select
              name="role"
              value={newUser.role}
              onChange={handleInputChange}
              className={styles.formSelect}
            >
              <option value="用户">用户</option>
              <option value="编辑">编辑</option>
              <option value="管理员">管理员</option>
            </select>
          </div>
          <div className={styles.formGroup}>
            <label className={styles.formLabel}>状态:</label>
            <select
              name="status"
              value={newUser.status}
              onChange={handleInputChange}
              className={styles.formSelect}
            >
              <option value="活跃">活跃</option>
              <option value="非活跃">非活跃</option>
            </select>
          </div>
          <button type="submit" className={styles.submitButton}>添加用户</button>
        </form>
      </div>
    </div>
  );
};

export default Users;